<template>
  <div class="login-container">
  <h2 class="login-title">疫情防控系统登陆</h2>
  <a-form
      layout="horizontal"
      :model="formState"
      @finish="callbackName"
      @finishFailed="handleFinishFailed"
      class = "login-form"
  >

    <a-form-item>
      <a-input v-model:value="formState.username" placeholder="用户名" class="inputBox">
        <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-input v-model:value="formState.password" type="password" placeholder="密码" class="inputBox">
        <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>

    <a-form-item>
        <a-button
            type="primary"
            html-type="submit"
            :disabled="formState.user === '' || formState.password === ''"
            class="submit"
            id="TencentCaptcha"
            data-appId="2088429155"
            data-cbfn="callbackName"
            data-diz-state="data-biz-state"
        >
          登录
        </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>
<script lang="ts">
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import {defineComponent,reactive, UnwrapRef} from 'vue';
import axios from 'axios';
import router from "@/router";
import {message} from "ant-design-vue";
declare let hexMd5:any;
declare let KEY:any;
interface FormState {
  username: string;
  password: string;
}
export default defineComponent({
  setup() {


        if((window as any).TencentCaptcha === undefined){
        let script = document.createElement('script')
          let head = document.getElementsByTagName('head')[0]
          script.type='text/javascript'
          script.charset='UTF-8'
          script.src='https://ssl.captcha.qq.com/TCaptcha.js'
          head.appendChild(script)
        }


    const formState: UnwrapRef<FormState> = reactive({
      username: '',
      password: '',
    });

    (window as any).callbackName = function (res:any){
      console.log('callback',res);
      if(res.ret === 0){
        axios({
          url:'api/user/check',
          method:'post',
          params:{
            ticket:res.ticket,
            randstr:res.randstr
          }
        }).then(
            (response)=>{
              console.log("图形验证",response.data);
              if(response.data ==0){
                handleFinish(formState)
              }
            }
        )
      }

    }






    const handleFinish = (values: FormState) => {
      //console.log("用户名",formState.username);
      //console.log("密码",formState.password);
      //console.log(values, formState);
      formState.password = hexMd5(formState.password + KEY);
      console.log("前端密码,",formState.password);
      axios({
        url:'api/login',
        method:'post',
        params:{
          username:formState.username,
          password:formState.password
        }
      }).then(
          (response) => {
            //console.log("请求成功",response.data)
            //console.log("角色:", response.data.data)
            //console.log("登录请求")
            if(response.data.errorCode==200 && response.data.data == "[学生]"){
                     // console.log("学生登陆")
              sessionStorage.setItem("loginid",formState.username);
              router.push("/form")

            }
            else if(response.data.errorCode==200 && response.data.data == "[管理员]"){
              sessionStorage.setItem("loginid",formState.username);
              router.push("/message")
            }
            else if(response.data.errorCode==2003){
              message.error("用户名密码错误!")
            }
            else if(response.data.errorCode==2006){
              message.error("账号被锁定")
            }
            else{
              message.error("格式错误！")
            }
          }
      )

    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      console.log(errors);
    };


    return {
      formState,
      handleFinish,
      handleFinishFailed,
    };
  },
  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>
<style>


.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-form {
  width: 565px;
  height: 372px;
  margin: 0 auto;
  padding: 40px 110px;

}
.inputBox{
  height: 45px;
}


.submit{
  width: 100%;
  height: 45px;
  font-size: 16px;
}

.register{
  width: 100%;
  height: 45px;
  font-size:16px;
  margin-top: 10px;
}
.login-title {
  color: #42b983;
  text-align: center;
  margin: 120px 0;
  font-size: 48px;
  font-family: Microsoft Yahei;
}

</style>
